<!--  -->
<template>
    <div class="main-content StrategiesDetail">
      <div class="detail-content">
        <el-tabs tab-position="top">
          <el-tab-pane label="策略配置">
            <div class="strategies-config-content">
              <el-form ref="searchForm" :model="strategiesForm">
                <el-form-item label="策略名称">
                  <el-input
                    v-model="strategiesForm.name"
                    placeholder="请输入策略名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="问题点/原因">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 8 }"
                    v-model="strategiesForm.question"
                    placeholder="请编辑问题点/原因"
                  ></el-input>
                </el-form-item>
                <el-form-item label="改善方案">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 8 }"
                    v-model="strategiesForm.scheme"
                    placeholder="请编辑改善方案"
                  ></el-input>
                </el-form-item>
                <el-form-item class="field-form-item" label="所属领域">
                  <el-checkbox-group v-model="fieldList">
                    <el-checkbox label="盈利能力">盈利能力</el-checkbox>
                    <el-checkbox label="客户管理">客户管理</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item class="field-form-item" label="适应KPI">
                  <el-cascader
                    :options="adaptOptions"
                    :props="adaptProps"
                    clearable
                  ></el-cascader>
                </el-form-item>
                <el-form-item class="enable-form-item" label="是否启用">
                  <el-switch v-model="strategiesForm.state"> </el-switch>
                </el-form-item>
                <el-button
                  class="saveBtn"
                  type="primary"
                  size="medium"
                  @click="submitstrategiesForm()"
                  >保存</el-button
                >
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="关联KPI">
            <div class="associated-kpi-content">
              <div class="associated-kpi-item">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="profitabilityCheckAll"
                  @change="handleProfitabilityCheckAllChange"
                  >盈利能力</el-checkbox
                >
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group
                  v-model="checkedProfitability"
                  @change="handleProfitabilityCheckedChange"
                >
                  <el-checkbox
                    v-for="city in profitabilityList"
                    :label="city"
                    :key="city"
                    >{{ city }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="策略详情">
            <div class="strategies-detail-content">
              <div class="top-text-box">
                <div class="text-item">
                  策略推荐次数：<span class="value">50</span>次
                </div>
                <div class="text-item">
                  创建日期：<span class="value">2020年11月5日11:28:25</span>
                </div>
                <div class="text-item">
                  修改日期：<span class="value">2020年11月5日11:28:32</span>
                </div>
              </div>

              <div class="titleTextBox">
                <div class="titleText">
                  <i class="iconfont iconliebiao"></i>
                  <span class="text">操作记录</span>
                </div>
              </div>
              <div class="table-box">
                <el-table
                  :data="tableData"
                  border
                  style="width: 100%"
                  :header-cell-style="{
                    color: '#000',
                    fontSize: '14px',
                    backgroundColor: '#f8f8f8',
                  }"
                  :row-style="{
                    borderRadius: '20px',
                  }"
                >
                  <el-table-column prop="date" label="操作时间">
                  </el-table-column>
                  <el-table-column prop="Operater" label="操作人">
                  </el-table-column>
                  <el-table-column prop="type" label="操作类型">
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400"
                >
                </el-pagination>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="力导图">
            <div class="data-charts-content">力导图</div>
          </el-tab-pane>
          <el-tab-pane label="策略指引">
            <div class="strategies-guide-content">
              <div class="screen-box">
                <el-form ref="strategiesGuideForm" :modal="strategiesGuideForm">
                  <el-form-item label="用户名">
                    <el-select
                      v-model="strategiesGuideForm.shopname"
                      filterable
                      placeholder="请选择查询用户名"
                    >
                      <el-option
                        v-for="item in guideOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="日期筛选">
                    <el-date-picker
                      v-model="strategiesGuideForm.date"
                      align="right"
                      type="date"
                      placeholder="选择日期"
                      :picker-options="guideDateOptions"
                    >
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item>
                    <el-switch
                      v-model="strategiesGuideForm.isRead"
                      active-text="已读"
                      inactive-text="未读"
                    >
                    </el-switch>
                  </el-form-item>
                  <el-form-item>
                    <el-button class="search-btn" type="primary">查询</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="guide-item">
                <el-card class="box-card" shadow="hover">
                  <div slot="header" class="clearfix">
                    <span class="read-state">未读</span>
                    <span>广汽三菱常州万菱店</span>
                    <span class="generate-date">2020-11-13 15:12:57</span>
                    <el-button
                      style="float: right; padding: 3px 0"
                      type="text"
                      @click="openAdoptModal()"
                      >采纳</el-button
                    >
                  </div>
                  <div class="text item">
                    <p class="guide-text-content">
                      原因：服务顾问未能如实将客户每项需求记录传递给车间，导致客户觉得自己的问题未能得到解决产生抱怨；
                    </p>
                    <p class="guide-text-content">
                      方案：服务顾问在开具委托书时将每一项客户的要求都如实进行填写，包括客户对其的嘱托或嘱咐。
                    </p>
                  </div>
                </el-card>
              </div>
              <div class="guide-item">
                <el-card class="box-card" shadow="hover">
                  <div slot="header" class="clearfix">
                    <span class="read-state isRead">已读</span>
                    <span>广汽三菱常州万菱店</span>
                    <span class="generate-date">2020-11-13 15:12:57</span>
                    <el-button
                      style="float: right; padding: 3px 0"
                      type="text"
                      @click="openAdoptModal()"
                      >采纳</el-button
                    >
                  </div>
                  <div class="text item">
                    <p class="guide-text-content">
                      原因：服务顾问未能如实将客户每项需求记录传递给车间，导致客户觉得自己的问题未能得到解决产生抱怨；
                    </p>
                    <p class="guide-text-content">
                      方案：服务顾问在开具委托书时将每一项客户的要求都如实进行填写，包括客户对其的嘱托或嘱咐。
                    </p>
                  </div>
                </el-card>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <bi-modal
        modalType="small"
        sureText="采纳"
        :showModal="showAdoptModal"
        @cancel="showAdoptModal = false"
        @submit="submitAdoptModal()"
      >
        <template v-slot:body>
          <div class="modal-tips">
            确认采纳此条策略吗？
          </div>
        </template>
      </bi-modal>
    </div>
</template>

<script>
import Modal from "../components/Modal";
const profitability = ["毛利", "产值"];
export default {
  props: {
    strategiesData: Object,
  },
  components: {
    "bi-modal": Modal,
  },
  data() {
    return {
      windowHeight: document.documentElement.clientHeight - 100, // 屏幕高度
      strategiesForm: {
        name: "",
        question: "",
        scheme: "",
        state: true,
      },
      fieldList: [], // 所属领域选择
      adaptProps: { multiple: true }, // 适应KPI配置 multiple是否开启多选
      adaptOptions: [
        {
          value: 1,
          label: "盈利能力",
          children: [
            {
              value: 2,
              label: "毛利",
            },
            {
              value: 7,
              label: "产值",
            },
            {
              value: 12,
              label: "保养产值",
            },
          ],
        },
        {
          value: 17,
          label: "客户管理",
          children: [
            {
              value: 18,
              label: "预约满意度",
            },
            {
              value: 21,
              label: "首保满意度",
            },
          ],
        },
      ],
      profitabilityCheckAll: false, // 是否全选
      checkedProfitability: [], // 已选中的值
      profitabilityList: profitability, // 多选列表
      isIndeterminate: true, // 是否开启全选配置
      tableData: [
        {
          date: "2020-12-21 15:03:00",
          Operater: "胡夏",
          type: "修改",
        },
        {
          date: "2020-12-21 15:03:00",
          Operater: "胡夏",
          type: "修改",
        },
        {
          date: "2020-12-21 15:03:00",
          Operater: "胡夏",
          type: "修改",
        },
        {
          date: "2020-12-21 15:03:00",
          Operater: "胡夏",
          type: "修改",
        },
      ],
      currentPage: 1, // 分页 当前页数
      showAdoptModal: false, // 控制 采纳modal显示
      strategiesGuideForm: {
        shopname: "",
        date: "",
        isRead: "",
      }, // 模糊查询条件
      guideOptions: [
        {
          value: "JSD001",
          label: "广汽三菱常州万菱店",
        },
        {
          value: "JSD002",
          label: "广汽三菱湖南星宏店",
        },
        {
          value: "JSD003",
          label: "广汽三菱河北佳信店",
        },
      ],
      guideDateOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.strategiesData);
  },
  methods: {
    // 保存
    submitstrategiesForm() {},
    // 盈利能力 全选
    handleProfitabilityCheckAllChange(val) {
      this.checkedProfitability = val ? profitability : [];
      this.isIndeterminate = false;
    },
    // 盈利能力 多选框点击
    handleProfitabilityCheckedChange(value) {
      let checkedCount = value.length;
      this.profitabilityCheckAll =
        checkedCount === this.profitabilityList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.profitabilityList.length;
    },

    // 分页 点击方法
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 打开采纳modal
    openAdoptModal() {
      this.showAdoptModal = true;
    },
    // 采纳 确认
    submitAdoptModal() {},
    // 模糊查询 选择
  },
};
</script>
<style lang="less">
.StrategiesDetail {
  width: 100%;
  height: 100%;
  padding-top: 0 !important;
  background-color: @color-white;
  .el-page-header__left {
    color: @color-primary;
  }
  .detail-content {
    width: 100%;
    height: 100%;
    .strategies-config-content {
      width: 60%;
      margin-left: 20px;
      .el-form-item {
        margin-bottom: 0;
      }
      .field-form-item {
        .alignCenter(flex, flex-start, unset, column);
      }
      .enable-form-item {
        margin-top: 10px;
      }
      .saveBtn {
        margin-top: 20px;
      }
    }
    .associated-kpi-content {
      margin-left: 20px;
    }
    .strategies-detail-content {
      margin-left: 20px;
      .top-text-box {
        .alignCenter();
        .text-item {
          color: @color-text-regular;
          margin-left: 15px;
          &:first-child {
            margin-left: 0;
          }
          .value {
            color: @color-text-primary;
            font-weight: 500;
          }
        }
      }
      .titleTextBox {
        margin-top: 15px;
        .titleTextBox();
      }
      .table-box {
        margin-top: 15px;
      }
    }
    .data-charts-content {
      margin-left: 20px;
    }
    .strategies-guide-content {
      margin: 0 20px;
      .screen-box {
        .el-form {
          .alignCenter();
          .el-form-item {
            margin-bottom: 0;
            margin-left: 10px;
            &:first-child {
              margin-left: 0;
            }
            .alignCenter();
            .search-btn{
              margin-left: 10px;
            }
          }
        }
      }
      .guide-item {
        margin-top: 20px;
        &:first-child {
          margin-top: 0;
        }
        .box-card {
          .read-state {
            display: inline-block;
            padding: 2px 5px;
            background-color: @color-danger;
            color: @color-white;
            border-radius: 2px;
            font-size: 12px;
            margin-right: 12px;
            &.isRead {
              background-color: @color-primary;
            }
          }
          .generate-date {
            margin-left: 10px;
            color: @color-text-secondary;
            font-size: 12px;
          }
          .guide-text-content {
            margin-top: 12px;
            &:first-child {
              margin-top: 0;
            }
          }
        }
      }
    }
  }
}
</style>
